<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./tools/flexible.js">
</head>
<body>
    <!-- 顶部 -->
    <header id="header">
        <div class="logo">
            <a href="./index.html">
                <img src="	http://chst.vip:8081/for-stu/wfzh/images/header_logo.png" alt="">
            </a>
        </div>
        <div class="app">
            <a href="">
                <img src="http://chst.vip:8081/for-stu/wfzh/images/header_app.png" alt="">
            </a>
        </div>
    </header>

    <!-- 搜索栏 -->
    <main id="search">
        <div class="searchbox">
            <input type="text" name placeholder="请输入你想比价的产品">
        </div>
        <div class="button">
            <button></button>
        </div>
    </main>
    
    <!-- 导航菜单 -->
    <!-- <nav class="nav">
        <div class="container">
            <div class="smallbox">
                <a href="">
                    <span>
                        <img src="http://chst.vip:8081/for-stu/wfzh/images/ic_search.png" alt="">
                    </span>
                </a>
                <p>比价搜索</p>
            </div>
 
    </nav> -->
    <nav class="nav" id="icons">
        <!-- <div id="icons"> -->
        <!-- <li>
            <img src="http://chst.vip:8081/for-stu/wfzh/images/ic_search.png" alt="">
            <span>比价搜索</span>
        </li> -->
        <!-- </div> -->
        
    </nav>
    <!-- 折扣推荐 -->
    <main class="discount">
        <span class="left">超值折扣推荐</span>
        <a href="" class="right">
            <img src="http://chst.vip:8081/for-stu/wfzh/images/more.png" alt="">
        </a>
    </main>

    <!-- 商品 -->
    <main class="product" id="product">
        <ul class="info">
            <!-- <li>
                <a href="">
                    <div class="left">
                        <img src="http://a.manmanbuy.com:8013/cuxiaoPic/201610/201610001412282758.jpg" alt="">
                    </div>
                    <div class="inforight">
                        <h4>
                            移动端凑单品：海天 纤维 生抽 1.28L
                            <span class="price">1.09元</span>
                        </h4>
                        <div class="bottom">
                            <div class="mall">
                                京东商城|<span>10-25 14:20</span>
                            </div>
                            <span class="comment">
                                <i class="iconfont">x</i>
                                有人评论
                            </span>
                        </div>
                    </div>
                </a>              
            </li> -->

        </ul>
    </main>

    <!-- 底部 -->
    <main id="footer">
        <div class="more">
            <a href="">更多优惠信息</a>
        </div>

        <div class="chart">
            <span>品牌排行</span>
            <span class="mright">
                <img src="http://chst.vip:8081/for-stu/wfzh/images/more.png" alt="">
            </span>
        </div>

        <div class="login">
            <div class="container">
                <div class="row">
                    <a href="">
                        <div>登入</div>
                    </a>
                    <a href="">
                        <div>注册</div>
                    </a>
                    <a href="javascript:scrollTo(0,0)">
                        <div>返回顶部</div>
                    </a>
                </div>
            </div>
            <div class="content_b">
                <p>
                    <a href="#">手机APP下载</a>
                    <a href="#">万峰智慧商城手机版</a>
                    " -- 掌上比价平台"
                </p>
                <p> chst.vip:8181/crm </p>
            </div>
        </div>
    </main>








    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script >
        // console.log($(this));
        // $(function(){
        //     // $(".nav .container .smallbox .drawer").slideUp(0)
        //     $(".nav .container .smallbox .more").click(function(){
        //         $(this).parents('.nav').css("height","300px")
        //     })
        // })

        var nav = document.querySelector('.nav')
        // console.log(nav);
        let xhr = new XMLHttpRequest()
        xhr.open("get","http://chst.vip:1234/api/getindexmenu",false)
        xhr.onload = function(){
            if (xhr.status===200) {
                let res = JSON.parse(xhr.responseText)
                console.log(res.result);

                var lis=''
                // let regExp = /^<[^<]+\s+src="([^''""]*)"/;
                let regExp = /<img\s*src=\"([^\"]*?)\"[^>]*>/;
                res.result.forEach((item,index) => {
                    let pic = res.result[index].img.match(regExp)[1];
                    // console.log(pic);

                    lis+=`
                    
                        <div class="icon">
                                <a href="./html/${item.titlehref}">
                                    <img src="http://chst.vip:8081/for-stu/wfzh/${pic}">
                                </a>
                                <span>${item.name}</span>
                        </div>
                
            
                    `
                  

                });
                
                nav.innerHTML=lis
            }
        }
        xhr.send()

       

        let box = document.querySelector('.product .info');
        const xhr2 = new XMLHttpRequest();
        xhr2.open('get','http://chst.vip:1234/api/getmoneyctrl',false);
        xhr2.onload = function(){
            if (xhr2.status === 200) {
                let res2 = JSON.parse(xhr2.responseText)
                console.log(res2.result);

                let lis2 = '';
                let regExp = /^<[^<]+\s+src="([^''""]*)"/;
                //"<img src=\"http://cacheimg.manmanbuy.com/r_img/cacheimg.aspx?width=600&amp;imgurl=http://a.manmanbuy.com:8013/cuxiaoPic/201610/201610001412282758.jpg\"
                res2.result.forEach((item,index)=>{
                    let url = res2.result[index].productImgSm.match(regExp)[1].split('=')[2];
                    // console.log(url);
                    lis2 += ` <li productid=${item.productId}>
                                    <a href="#">
                                        <div class="left">
                                            <img src="${url}" alt="">
                                        </div>
                                        <div class="inforight">
                                            <h4>
                                                ${item.productName}
                                                <span class="price">${item.productPinkage}</span>
                                            </h4>
                                            <div class="bottom">
                                                <div class="mall">
                                                    ${item.productFrom}|<span>${item.productTime}</span>
                                                </div>
                                                <span class="comment">
                                                    <i class="iconfont">x</i>
                                                    ${item.productComCount}
                                                </span>
                                            </div>
                                        </div>
                                    </a>              
                                </li>`
                    
                })
                box.innerHTML = lis2
            }
        }

        xhr2.send(null)

        $('#product').on('click',function(e){
            let target = e.target;
            console.log(1);
            console.log(target);

            let productId;
            if (target.nodeName === 'LI') {
                productId = $(target).attr('productId')
            }else{
                productId = $(target).parents('li').attr('productId')
            }
            console.log(productId);
            // 点击 产品列表里的 li 跳转到产品详情页 并把每个div 自带的 productId 属性和值都传过去
            location.href='./html/indexXiang.html?productId='+productId
        })

    </script>

    <script>
          $(function(){
                //点击更多隐藏
              
                console.log($("#icons"));
                console.log($("#icons div:nth-child(8)"));
                $("#icons div a").eq(7)[0].href = "javascript:;"
                console.log($("#icons div a").eq(7)[0].href)
                $("#icons div").eq(7).click(function () {
                    
                $("#icons div:nth-last-child(-n+4)").finish().slideToggle(200)
            })
        })




    </script>
</body>
</html>